import React, { useState, useEffect } from "react";
import logo from "./logo.svg";
import "./App.css";
import Welcome1, { Welcome2 } from "./components/CompType";
import Clock from "./components/Clock";
import StateTest from "./components/StateTest";
import CartSample from "./components/CartSample";
import Lifecycle from "./components/Lifecycle";
import AntdTest from "./components/AntdTest";
import CommentList from "./components/CommentList";
import Hoc from "./components/Hoc";
import Composition from "./components/Composition";
import HookTest from "./components/HookTest";
import ContextTest from "./components/ContextTest";
import WrappedNormalLoginForm from "./components/AntdForm";
import KForm from "./components/KForm";
import ReduxTest from "./components/ReduxTest";
import { Provider } from "react-redux";
import store from "./store";
import RouterSample from "./components/RouterSample";

function App(props) {
  //react hook
  const [count, setCount] = useState(4);
  const [prop, setProp] = useState("some prop");
  let name = "chen";
  const user = { firstname: "yunhao", lastname: "chen" };
  const jsx = <p>hello,chen</p>;

  useEffect(() => {
    setProp("new prop");
    setTimeout(() => {
      setProp("");
    }, 2000);
  }, []);

  const formatName = user => {
    return user.firstname + " " + user.lastname;
  };
  return (
    <div className="App">
      {/* <p>You click {count}times</p>
      <p>My name is {name},I am {props.age}years old</p>
      <button onClick={()=>setCount(count+2)}>
        Click Me
      </button>
      <p>{formatName(user)}</p>
      <img src={logo} style={{width:'100px'}} alt="img"></img>
      {jsx} */}

      {/*使用其他组件*/}
      {/* <Welcome1 name="陈1"></Welcome1> */}
      {/* <Welcome2 name="陈2"></Welcome2> */}
      {/*组件状态的改变*/}
      {/* <Clock></Clock> */}
      {/* <StateTest></StateTest> */}
      {/*条件与循环*/}
      {/* <CartSample title="购物车"></CartSample> */}
      {/**生命周期 */}
      {/* {prop && <Lifecycle prop={prop}></Lifecycle>} */}
      {/**antd */}
      {/* <AntdTest></AntdTest> */}
      {/**展示组件和容器组件 */}
      {/* <CommentList></CommentList> */}
      {/**高阶组件 */}
      {/* <Hoc></Hoc> */}
      {/**复合组件 */}
      {/* <Composition></Composition> */}
      {/**Hook */}
      {/* <HookTest></HookTest> */}
      {/**Context */}
      {/* <ContextTest></ContextTest> */}
      {/**AntdForm */}
      {/* <WrappedNormalLoginForm></WrappedNormalLoginForm> */}
      {/**KForm */}
      {/* <KForm></KForm> */}
      {/**Redux */}
      <Provider store={store}>
        {/* <ReduxTest></ReduxTest> */}
        <RouterSample></RouterSample>
      </Provider>
    </div>
  );
}

export default App;
